<template>
  <div>
    <div class="user-theme" @click="handleChangeTheme">
      <icon-arco :size="20" :type="themeStore.themePro === 'dark' ? 'icon-moon' : 'icon-sun'" />
    </div>
    <div class="user-dropdown">
      <span class="user-dropdown-menu__name">admin</span>
      <a-dropdown position="br" trigger="hover">
        <span class="user-dropdown-menu">
          <a-avatar class="user-dropdown-menu__avatar">
            <img :src="nemuCover" alt="avatar" />
          </a-avatar>
          <icon-arco class="user-dropdown-menu__down" type="icon-down" />
        </span>
        <template #content>
          <a-doption>
            <template #icon><icon-arco type="icon-lock" /></template>
            修改密码
          </a-doption>
          <a-doption @click="handleLoginOut">
            <template #icon><icon-arco type="icon-export" /></template>
            退出登录
          </a-doption>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useThemeStore } from '@/store/modules/theme'
import { useUserStore } from '@/store/modules/user'
import nemuCover from '@/assets/images/nemu-cover.png'

const themeStore = useThemeStore()
const userStore = useUserStore()
/**
 * 切换主题
 */
function handleChangeTheme() {
  const themeStr = themeStore.themePro === 'ligth' ? 'dark' : 'ligth'
  themeStore.setTheme(themeStr)
}

/**
 * 退出登录
 */
function handleLoginOut() {
  userStore.handleClearLoginOut()
}
</script>

<style lang="less" scoped>
.user-full {
  margin-right: 12px;
  cursor: pointer;
}
</style>
